<template>
	<div class="app-container">
		<div class="header">
			<svg-icon icon-class="system-erp" style="width: 18px; height: 18px; position: relative; top: 1px; margin-right: 10px" />添加日志信息
		</div>
		<el-form ref="baseform" :model="form" label-position="right" :rules="rules" label-width="120px">
			<el-form-item prop="customerName" label="客户名称">
				<el-input disabled v-model="form.customerName" style="width: 50%; margin-right: 10px" placeholder="请输入客户名称" />
			</el-form-item>

			<el-form-item prop="logName" label="日志标题">
				<el-input v-model="form.logName" style="width: 50%" placeholder="请输入日志标题" />
			</el-form-item>
			<el-form-item prop="logTime" label="事件时间">
				<el-date-picker
					clearable
					v-model="form.logTime"
					style="width: 340px"
					value-format="YYYY-MM-DD HH:mm:ss"
					type="date"
					:placeholder="`请选择事件时间`"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="文件上传">
				<el-upload
					v-model:file-list="filelist"
					:action="fileUrl"
					multiple
					ref="upload"
					:headers="token"
					name="files"
					:on-success="handleSuccess"
					:on-remove="handleRemove"
					style="width: 340px"
				>
					<el-button type="primary">上传</el-button>
				</el-upload>
			</el-form-item>

			<el-form-item label="图片上传">
				<el-upload
					class="avatar-uploader"
					:action="imgUrl"
					ref="upload"
					multiple
					accept=".jpg,.jpeg,.png"
					list-type="picture-card"
					v-model:file-list="imglist"
					:headers="token"
					name="files"
					:on-success="handleSuccessImg"
					:on-remove="handleRemoveImg"
					:on-preview="handlePictureCardPreview"
				>
					<el-icon class="avatar-uploader-icon"><Plus /></el-icon>
				</el-upload>
			</el-form-item>
			<el-form-item prop="logContent" label="详细内容">
				<Edit v-model:modelValue="form.logContent" noImg style="height: 300px" />
			</el-form-item>
		</el-form>
		<div style="line-height: 80px; height: 80px; padding-left: 100px; margin-top: 30px">
			<el-button type="primary" @click="submit">提交</el-button>
			<el-button @click="reback">返回</el-button>
		</div>
		<el-dialog v-model="dialogVisible">
			<img v-full :src="dialogImageUrl" alt="Preview Image" />
		</el-dialog>
	</div>
</template>
<script setup>
import { computed, reactive } from 'vue'
const { proxy } = getCurrentInstance()
import Edit from '@/components/Editor/index'
import { getConfigKey } from '@/api/system/config'
import { getToken } from '@/utils/auth'
import { addLog } from '@/api/custom/custom'
import { useRoute } from 'vue-router'
import useUserStore from '@/store/modules/user'
import useTagsViewStore from '@/store/modules/tagsView'
const tagsView = useTagsViewStore()
const userStore = useUserStore()
const route = useRoute()
const fileUrl = ref('')
const imgUrl = ref('')
const pre = ref('')

getConfigKey('file_upload').then((response) => {
	fileUrl.value = response.msg
})
getConfigKey('img_upload').then((response) => {
	imgUrl.value = response.msg
})
getConfigKey('sys.upload').then((response) => {
	pre.value = response.msg
})

const token = { Authorization: 'Bearer ' + getToken() }
const router = useRouter()
const baseform = ref()

const form = reactive({
	logId: '',
	customerId: route.query.id,
	customerName: route.query.customerName,
	logName: '',
	logTime: '',
	fileList: [],
	pictureList: [],
	logContent: ''
})
const rules = {
	logName: [{ required: true, message: '日志标题不能为空', trigger: 'blur' }],
	atime: [{ required: true, message: '事件事件不能为空', trigger: 'blur' }],
	logContent: [{ required: true, message: '详细内容不能为空', trigger: 'blur' }],
	logTime: [{ required: true, message: '事件时间不能为空', trigger: 'blur' }]
}
const imglist = ref([])
const filelist = ref([])

const handleSuccessImg = () => {
	form.pictureList = imglist.value.map((e) => {
		if (e && e.response) {
			if (e && e.response) {
				return e.response.data[0]
			}
		}
	})
}
const handleRemoveImg = () => {
	form.pictureList = imglist.value.map((e) => {
		if (e && e.response) {
			if (e && e.response) {
				return e.response.data[0]
			}
		}
	})
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const handleSuccess = () => {
	form.fileList = filelist.value.map((e) => {
		if (e && e.response) {
			return e.response.data[0]
		}
	})
}
const handleRemove = () => {
	form.fileList = filelist.value.map((e) => {
		if (e && e.response) {
			return e.response.data[0]
		}
	})
}
const handlePictureCardPreview = (uploadFile) => {
	dialogImageUrl.value = uploadFile.url
	dialogVisible.value = true
}
const submit = () => {
	baseform.value.validate((valid, e) => {
		if (valid) {
			addLog(form).then((res) => {
				proxy.$modal.msgSuccess('新增成功！')
				tagsView.delView(router.currentRoute.value)
				router.go(-1)
			})
		}
	})
}

const reback = () => {
	tagsView.delView(router.currentRoute.value)
	router.go(-1)
}
</script>
<style lang="scss" scoped>
.header {
	height: 40px;
	line-height: 40px;
	border-bottom: 1px rgba(240, 240, 240, 1) solid;
	margin-bottom: 5px;
}
</style>
